<template>
	<div>
		<div class="dingdan">
			<div class="title-color-02">
				<a href="#/dingdan06">
					<div class="left">
						<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
					</div>
				</a>
				<div class="qbdingdan01">
					<p>全部订单</p>
				</div>
				<div class="bianji01">
					<a href="#">
						<p>编辑</p>
					</a>
				</div>
			</div>
		</div>
		<!--标题栏-->
		<div class="jiaohu">
			<p class="active4">全部订单</p>
			<p>待支付</p>
			<p>待发货</p>
			<p>待收货</p>
			<p>交易</p>
		</div>
		<!--内容-->
		<ul class="ul07">
			<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">待支付</p>
				</div>
				<div class="mifen07">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<p class="huihuxi07">会呼吸丝滑蜜粉</p>
					<p class="guige07">规格:蜜粉</p><br />
					<p class="score07">¥166.06</p>
					<p class="cheng07">✖一件️</p>
				</div>
				<div class="jishi07">
					<span class="span07">应付:<p>¥166.06</p></span>
					<p class="djs07">倒计时:03:02:56</p>
					<button id="fukuan07">去付款</button>
				</div>
			</li>
				<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">代发货</p>
				</div>
				<div class="mifen07">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<p class="huihuxi07">会呼吸丝滑蜜粉</p>
					<p class="guige07">规格:蜜粉</p><br />
					<p class="score07">¥166.06</p>
					<p class="cheng07">✖一件️</p>
				</div>
				<div class="jishi07">
					<p class="heji07">共计1件商品  合计：￥166.06（含运费：￥1.00）</p>
					<p class="djs072">05:00:00</p>
					<button id="fukuan07">取消订单</button>
					<button id="cuidan07">催单</button>
				</div>
			</li>
			<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">待收货</p>
				</div>
				<div class="mifen07">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<p class="huihuxi07">会呼吸丝滑蜜粉</p>
					<p class="guige07">规格:蜜粉</p><br />
					<p class="score07">¥166.06</p>
					<p class="cheng07">✖一件️</p>
				</div>
				<div class="jishi07">
					<span class="span07">应付:<p>¥166.06</p></span>
					<button id="fukuan07">确认收货</button>
				</div>
			</li>
			<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">交易完成</p>
				</div>
				<div class="mifen074">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
				</div>
				<div class="jishi07">
					<span class="span07">应付:<p>¥166.06</p></span>
					<button id="fukuan07">发表心得</button>
				</div>
			</li>
			<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">已取消</p>
				</div>
				<div class="mifen074">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
				</div>
				<div class="jishi07">
					<span class="span07">应付:<p>¥166.06</p></span>
				</div>
			</li>
			<li>
				<div class="zhifu07">
					<p class="bianhao07">订单编号：1485269676465</p>
					<p class="daizhifu07">交易关闭</p>
				</div>
				<div class="mifen074">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png"/>
				</div>
				<div class="jishi07">
					<span class="span07">应付:<p>¥166.06</p></span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		components:{
			
		},
		methods:{
			jiaohu:function(){
				$(".jiaohu p").click(function(){
					$(this).addClass("active4").siblings().removeClass("active4");
				});
			}
		},
		mounted:function(){
			this.jiaohu();
		}
	}
</script>

<style>
	html {
		background: #f2f2f2;
	}
	
	#app {
		overflow: hidden;
	}
	
	#dd02 {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
	}
	
	.dingdan {
		width: 100%;
		height: 9.6rem;
		background: #e53e42;
	}
	
	.title-color-02 {
		width: 95%;
		display: flex;
		margin-left: 2rem;
		justify-content: space-between;
	}
	
	.left {
		margin-top: 3rem;
	}
	
	.left img {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.qbdingdan01 {
		margin-top: 3rem;
	}
	
	.qbdingdan01 p {
		height: 3.5rem;
		font-size: 3.6rem;
		color: white;
	}
	
	.bianji01 {
		margin-top: 3.2rem;
	}
	
	.bianji01 p {
		width: 6.1rem;
		font-size: 3rem;
		color: white;
	}
	.jiaohu{
		display: flex;
		justify-content: space-between;
	}
	.jiaohu p{
		width: 12.2rem;
		font-size: 2.9rem;
		background: white;
		padding: 1rem;
	}
	.active4{
		color: red;
		border-bottom: 0.1rem solid red;
	}
	.ul07{
		position: absolute;
		left: 0;
		top: 16rem;
		width: 100%;
	}
	.ul07 li{
		position: relative;
		width: 100%;
		height: 34.8rem;
		background: white;
		margin-bottom: 1rem;
	}
	.bianhao07{
		font-size: 2.8rem;
		position: absolute;
		left: 2rem;
		top: 1.6rem;
	}
	.zhifu07{
		position: absolute;
		left: 0;
		top: 0;
		border: 0.1rem solid gainsboro;
		width: 100%;
		height: 6rem;
	}
	.daizhifu07{
		position: absolute;
		font-size: 2.3rem;
		color: red;
		right: 2rem;
		top: 1.6rem;
	}
	
	.mifen07 img{
		position: absolute;
		width: 8.6rem;
		height: 10rem;
		top: 11rem;
		left: 6.7rem;
	}
	.huihuxi07{
		position: absolute;
		font-size: 2.7rem;
		top: 9.1rem;
		left: 22rem;
	}
	.guige07{
		position: absolute;
		font-size: 2.3rem;
		left: 22rem;
		top: 14rem;
	}
	.score07{
		position: absolute;
		color: red;
		font-size: 1.7rem;
		left: 22rem;
		top: 21.5rem;
	}
	.cheng07{
		position: absolute;
		font-size: 2.6rem;
		left: 35rem;
		top: 21rem;
	}
	.jishi07{
		position: absolute;
		width: 100%;
		height: 8.8rem;
		border: 0.1rem solid gainsboro;
		left: 0;
		top: 26.2rem;
	}
	.span07{
		position: absolute;
		left: 2rem;
		top: 3rem;
		font-size: 2.7rem;
	}
	.span07 p{
		color: red;
		position: absolute;
		left: 7rem;
		top: 0rem;
	}
	.djs07{
		position: absolute;
		left: 36.9rem;
		top: 3.3rem;
		color: red;
		font-size: 2.3rem;
	}
	#fukuan07{
		position: absolute;
		font-size: 2.3rem;
		background:  #e53e42;	
		color: white;
		right: 2rem;
		top: 3rem;
		padding:0 1rem;
		border-radius: 2rem;
	}
	#cuidan07{
		position: absolute;
		font-size: 2.3rem;
		background:  #e53e42;	
		color: white;
		right: 15rem;
		top: 3rem;
		padding:0 2rem;
		border-radius: 2rem;
	}
	.heji07{
		position: absolute;
		font-size: 2.4rem;
		right: 0;
	}
	.djs072{
		position: absolute;
		right: 2rem;
		bottom: 0rem;
		color: red;
		font-size: 2rem;
	}
	.mifen074{
		position: absolute;
		left: 0rem;
		top: 11.1rem;
	}
	.mifen074 img{
		width: 8.6rem;
		height: 10rem;
		margin-left: 7rem;
	}
</style>